<template>
	<div class="warpper">
		<van-radio-group v-model="radio">
			<van-cell center v-for="(item,index) in list" :key="index">
				<template #icon>
					<van-radio :name="item.id" disabled checked-color="#ee0a24"></van-radio>
				</template>
				<template #title>
					<span>{{item.name}}</span>
					<span class="custom-title">{{item.tel}}</span>
					<van-tag type="danger">默认</van-tag>
				</template>
				<template #label>
					<span class="">{{item.address}}</span>
				</template>
				<template #right-icon>
					<van-icon name="edit" size="20" @click="onEdit(item.id)" />
				</template>
			</van-cell>
		</van-radio-group>
		<div class="btn">
			<van-button type="danger" round @click=" onAdd()">新增联系人</van-button>
		</div>
		<van-divider v-if="list.length>9" @click="move()">点击加载更多</van-divider>
	</div>
</template>

<script>
import {
  getAddress
} from '@/api/address.js'
export default {
  data() {
    return {
      radio: 0,
      chosenAddressId: '1',
      list: [],
      limit: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    move() {
      this.limit += 10
      this.getList(this.limit)
    },
    // 获取地址列表
    getList(limit) {
      getAddress({
        limit: limit
      }).then(res => {
        this.list = []
        res.data.forEach(rs => {
          const list = {}
          list.id = rs.id
          list.tel = rs.phone
          list.address = rs.province + rs.city + rs.district + rs.detail
          list.name = rs.realName
          if (rs.isDefault == 1) {
            this.radio = rs.id
          }
          this.list.push(list)
        })
      })
    },
    onAdd() {
      this.$router.push('/newContact')
    },
    onEdit(id) {
      this.$router.push({
        name: 'NewContact',
        params: {
          id: id
        }
      })
    }
  }
}
</script>

<style scoped>
	.warpper {
		margin-top: 7px;
		padding: 5px;

	}

	.custom-title {
		margin: 5px;
	}

	.van-cell__title {
		margin-left: 10px;
	}

	.btn button {
		width: 100%;
	}

	.btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10px;
		background-color: #FFFFFF;
	}
</style>
